<template>
  <div class="building">
    <div class="login-container">
      <el-form ref="loginForm" :model="form">
        <div class="avatar-box">
          <el-avatar :size="100">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
        </div>
        <div class="title-container">
          <h3 class="title">后台管理系统</h3>
        </div>
        <el-form-item prop="username">
          <el-input
            ref="username"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            name="username"
            type="text"
            tabindex="1"
            auto-complete="on"
            prefix-icon="UserFilled"
            clearable/>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            key="passwordType"
            ref="password"
            v-model="loginForm.password"
            type="passwordType"
            placeholder="请输入密码"
            name="password"
            tabindex="2"
            auto-complete="no"
            @keyup.enter="backendLogin"
            prefix-icon="Key"
            clearable
            show-password
            />
        </el-form-item>
        <el-button :loading="loading" type="primary" 
          style="width:100%;margin-bottom:30px;" 
          @click="backendLogin">登录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import {flowerUserLogin} from '@/api/auth'
import router from '@/router/index'

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
      }
    },
    methods: {
      backendLogin:function() {
        let formData = new FormData();
          formData.append("username", this.loginForm.username);
          formData.append("password", this.loginForm.password);
          flowerUserLogin(formData).then(response => {
          console.log(response.data);
          window.localStorage.setItem('token',response.data.data)
          if (response.data.status == 'OK') {
            router.push({name:'backend'})
            } else {
          }
        }).catch(response => {
          
        })
      }
    }
  }
</script>

<style>
  .login-container {
    border-radius: 20px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 45%;
    padding: 10% 10% 15px 10%;
    border: 2px solid #eaeaea;
    box-shadow: 0 0 20px #cac6c6;
    text-align: center;
  }
  
  .title-container {
    margin: 0px auto 20% auto;
    text-align: center;
    color: #000000;
  }

  .building{
    background:url("../../assets/backendBackground.jpeg");
    width:100%;
    height:100%;
    position:fixed;
    background-size:100% 100%;
  } 

</style>
